<script setup lang="ts"> 
  import { onMounted, reactive, watch } from 'vue';
  import { useRouter, useRoute } from 'vue-router'
  import { useCurrentInstance } from '@/common/utils/methods';
  import { ResponseType } from '@/common/types/response';
  import { MenuItemType, MenuItemChildType } from '@/common/types/menu'
  const { $axios } = useCurrentInstance();

  const router = useRouter()
  const route = useRoute()

  const data = reactive({
    menuList: [] as Array<MenuItemType>,
    menuOpen: [] as string[],
    menuActive: ''
  })
  

  //=> 获取全部菜单列表
  const getMenu = () => {
    $axios.post('/common.core.api/user/common/getMenu', { 
      platform: 0, tenantId: '585014642717982720' 
    }).then((res: ResponseType) => {
      if (res.succeed) {
        const categoryId = localStorage.getItem('examId');
        if (!categoryId) {
          location.href = '/'
        } else {
          data.menuList = res.data.filter((e: MenuItemType) => (e.categoryId == categoryId)).map((item: MenuItemType) => {
            if (item.children) {
              item.children = item.children.map((itemSub: MenuItemChildType) => {
                return {
                  path: itemSub.jumpPage,
                  title: itemSub.permiName,
                  icon: itemSub.permiIcon
                }
              })
            }
            return {
              title: item.permiName,
              icon: item.permiIcon,
              children: item.children
            }
          })

          setActiveNav();
        }
      }
    })
  }

  //=> 设置当前选中菜单
  const setActiveNav = () => {
    let openeds: string[] = []
    let current = ''
    try {
      data.menuList.forEach((item: MenuItemType, index: number) => {
        if (item.children) {
          item.children.forEach((value: MenuItemType, key: number) => {
            if (route.path.includes(value.path)) {
              current = 'navS' + index + '_' + key
              openeds.push('nav' + index)
            }
          })
        }
      })
    } catch (err) { 
      console.log(err)
    }
    
    data.menuActive = current;
    data.menuOpen = openeds;
  }

  // 打开新页面
  const openPage = (menuItem: MenuItemType) => {
    if (menuItem.path && menuItem.path !== route.path) {
      router.push({
        path: menuItem.path
      })
    }
  }

  // 监听route变化，切换选中导航
  watch(route, () => {
    setActiveNav();
  })
  

  onMounted(() => {
    getMenu();
  })
</script>

<template>
  <div class="slide-bar">
    <el-menu
      :default-active="data.menuActive"
      :default-openeds="data.menuOpen"
      :unique-opened="true"
    >
      <el-sub-menu :index="'nav_' + index" v-for="(menu, index) in data.menuList" :key="menu.title">
        <template #title>
          <img :src="menu.icon" v-if="menu.icon" class="img-icon" />
          <span>{{ menu.title }}</span>
        </template>
        <template :index="'nav' + index" v-if="menu.children && menu.children.length > 0">
          <el-menu-item
            :index="'navS' + index + '_' + childIndex"
            v-for="(child, childIndex) in menu.children"
            :key="'navS_' + index + '_' + childIndex"
            @click="openPage(child)"
          >
            <img :src="child.icon" v-if="child.icon" class="img-icon" />
            <span slot="title">{{ child.title }}</span>
          </el-menu-item>
        </template>
        <template v-else>
          <img :src="menu.icon" v-if="menu.icon" class="img-icon" />
          <span>{{ menu.title }}</span>
        </template>
      </el-sub-menu>  
    </el-menu>
  </div>
</template>

<style scoped>
.slide-bar {
  position: absolute;
  left: 0;
  top: 50px;
  font-size: 14px;
  bottom: 10px;
  overflow-y: auto;
  background: #fff;
  user-select: none;
}
.el-menu {
  border-right: 0;
  width: 200px;
}
.el-submenu__title > i {
    margin-top: -3px;
}
.img-icon {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 10px;
}

.el-menu-item.is-active {
    color: #3d88f2;
}
</style>
